<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module的概述</title>
</head>
<body>
    <h1>Module的概述</h1>
    <h2>ES6模块功能主要由两个命令构成：export和import</h2>

    <script type="module">
        // 导入模块
        import { firstName, lastName, year } from './profile.js';

        // 整体导入
        import * as circle from './circle.js';

        // 默认导入
        import myFunction from './myModule.js';

        // 同时导入默认和其他接口
        import defaultExport, { export1, export2 } from './module.js';

        // 模块的特点
        // 1. 严格模式: ES6 的模块自动采用严格模式
        // 'use strict' 是默认的

        // 2. import命令具有提升效果
        foo();
        import { foo } from './module.js';

        // 3. 模块中的this指向undefined
        console.log(this === undefined); // true

        // 4. 模块是单例的
        import { counter, incCounter } from './counter.js';
        console.log(counter); // 3
        incCounter();
        console.log(counter); // 4
    </script>

    <!-- 在HTML中使用模块 -->
    <script type="module" src="./app.js"></script>
    <script nomodule src="./fallback.js"></script>
</body>
</html> 